<template>
    <div class="common-layout">
    <el-container>
      <el-header style="background-color: black;">
        <div style="text-align: center;color: aliceblue;line-height: 50px;" >溯源管理兔头项目</div>
      </el-header>
      <el-container>
        <el-aside width="350px">
          <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu :index="item.value" v-for="item in getSource">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{ item.label }}</span>
          </template>
          <el-sub-menu :index="item.value" v-for="(item,index) in getSource[0].newChildren">
            <template #title>
              <el-icon><location /></el-icon>
              <span>{{ item.label }}</span>
            </template>
            <el-menu-item-group v-for="item in getSource[0].newChildren[index].newChildren">
              <el-menu-item :index="item.value" @click="PathRouter(item.value)">{{ item.label }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>  
        </el-sub-menu>       
      </el-menu>
        </el-aside>
        <el-main style="height: 200vh;">
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <div>
  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="form"    ref="ruleFormRef"
    style="max-width: 600px"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon>
      <el-form-item label="生产名称" :label-width="formLabelWidth" prop="goodsid">
        <el-select v-model="form.goodsid" placeholder="请选择">
          <el-option :label="item.goodsName" :value="item.goodsid" v-for="item in GoodSelect"/>
        </el-select>
      </el-form-item>
      <el-form-item label="生产批次" :label-width="formLabelWidth" prop="productionBath">
        <el-input v-model="form.productionBath" autocomplete="off" />
      </el-form-item>
      <el-form-item label="保质期（天）" :label-width="formLabelWidth" prop="expirationtime">
        <el-input v-model="form.expirationtime" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生产许可证" :label-width="formLabelWidth" prop="proDuctionNum">
        <el-input v-model="form.proDuctionNum" autocomplete="off" />
      </el-form-item>
      <el-form-item label="生产企业" :label-width="formLabelWidth" prop="proDuctionenterprise">
        <el-input v-model="form.proDuctionenterprise" autocomplete="off" />
      </el-form-item>
      <el-upload
    class="avatar-uploader"
    action="https://localhost:7116/api/SourceController1/GETimages"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="form.proDuctionImages" :src="form.proDuctionImages" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">添加</el-button>
        <el-button type="primary" @click="resetForm(ruleFormRef)">
        取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup>
 


import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { RouterView } from 'vue-router';
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router=useRouter();
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
onMounted(()=>{

  SETSource()
  Goods()
})

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

const form=reactive({

  proDuctionBasicid: 0,
    goodsid: '',
    productionBath: "",
    expirationtime: 0,
    proDuctionNum: "",
    proDuctionenterprise: "",
    proDuctionImages: ""

})



const GoodSelect=ref()
const Goods=(()=>{

  axios.post('https://localhost:7116/api/SourceController1/Goodsslect',{}).then(res=>{
    GoodSelect.value=res.data.data
    console.log(res.data.data)
  })

})





const getSource=ref()
const SETSource=(()=>{
  axios.post('https://localhost:7116/api/SourceController1/Sourse',{}).then(res=>{
    getSource.value=res.data.data
    console.log(res.data)
  })
})
const rules = reactive<FormRules>({
  goodsid: [
    { required: true, message: '下拉框未选择', trigger: 'blur' },
  ],
  productionBath: [
    {
      required: true,
      message: '生产批次没填写',
      trigger: 'change',
    },
  ],
  expirationtime: [
    {
      required: true,
      message: '保质期未填写',
      trigger: 'change',
    },
  ],
  proDuctionNum: [
    {
      required: true,
      message: '生产许可证未填写',
      trigger: 'change',
    },
  ],
  proDuctionenterprise: [
    {

      required: true,
      message: '生产企业未填写',
      trigger: 'change',
    },
  ],
  proDuctionImages: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
})
const submitForm = async (formEl: FormInstance | undefined) => {


  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {


      axios.post('https://localhost:7116/api/SourceController1/ProductionBaseicMessAdd',{
    gEtProductionBasicMess: {
    proDuctionBasicid: 0,
    goodsid: Number(form.goodsid),
    productionBath: form.productionBath,
    expirationtime: form.expirationtime,
    proDuctionNum: form.proDuctionNum,
    proDuctionenterprise: form.proDuctionenterprise,
    proDuctionImages: form.proDuctionImages
  }


      }).then(res=>{
        if(res.data.code==0)
      {
          ElMessage.success("添加成功");
      }

      })
      dialogFormVisible.value=false;
     



    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  dialogFormVisible.value=false;
}


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key,keyPath,'get')

  if(key=='2')
{
dialogFormVisible.value=true;
router.push('/');
}

if(key=='4')
{
  router.push('/Culturehtml');
}
if(key=='5')
{
  router.push('/Slaughtering');
}
if(key=='6')
{
  router.push('/Deepprocessing');
}
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath,'2222222222222222')
}

const handleAvatarSuccess= (rul:any) => {
  form.proDuctionImages="https://localhost:7116"+rul;
}

const beforeAvatarUpload = (rawFile:any) => {
  if (rawFile.type !== 'image/jpeg'&&
    rawFile.type !== 'image/jpg'
  ) {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}



const PathRouter=((Stah:number)=>{


 if(Stah==7)
 {
  router.push({
    path:'/Culturehtml',
    query:{
      id:2
    }

  })
 }
 if(Stah==8)
 {
  router.push({
    path:'/Culturehtml',
    query:{
      id:3
    }

  })
 }

})

</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>